<script setup>
import { bus } from '@/utils/common/mitt'
import { ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  options: {
    type: Object,
    default: []
  }
})
const emits = defineEmits(['handleTable'])

function handleTable(e, type) {
  emits('handleTable', e.row, type)
}

function handleSwitch(e) {
  console.log(e)
}

/**
 * 判断按钮是否需要禁用
 * @param data 按钮prop
 * @param status 数据状态
 * @returns {boolean} 是否禁用
 */
function isButtonDisabled(data, status) {
  // console.log(data,status)
  // 不需要禁用的按钮prop列表
  const enabledButtons = [
    'detail',
    'delete',
    'apply',
    'view',
    'process',
    'processMangement',
    'viewWeekly',
    'viewResultStep'
  ]
  // 当状态为0或null时不禁用,或者按钮在enabledButtons列表中时不禁用
  if (data === 'submitMaterial' && status == 1) {
    return false
  }
  // 特殊处理noprocess和processs按钮
  // if (data === 'noprocess' || data === 'processs') {
  //   return true
  // }
  return status !== 0 && status !== null && !enabledButtons.includes(data)
}

/**
 * 获取材料状态显示文本和样式
 * @param status 状态值
 * @returns {{text: string, type: string}} 显示文本和标签类型
 */
function getMaterialStatus(status) {
  const statusMap = {
    null: { text: '暂未提交', type: 'warning' },
    0: { text: '等待审核', type: 'info' },
    1: { text: '审核不通过', type: 'danger' },
    2: { text: '审核通过', type: 'success' }
  }
  return statusMap[status] || { text: '未知状态', type: 'info' }
}

/**
 * 获取实习状态显示文本和样式
 * @param status 状态值
 * @returns {{text: string, type: string}} 显示文本和标签类型
 */
function getInternshipStatus(status) {
  const statusMap = {
    0: { text: '未实习', type: 'warning' },
    1: { text: '正在实习', type: 'primary' },
    2: { text: '实习完毕', type: 'success' }
  }
  return statusMap[status] || { text: '未知状态', type: 'info' }
}
</script>

<template>
  <div class="table-wrapper">
    <el-table
      :data="props.tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <slot name="firstColumn"></slot>
      <el-table-column
        v-for="item in props.columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        min-width="150"
        :sortable="item.sortable"
        show-overflow-tooltip
      >
        <template #default="scope">
          <!-- 审核状态 -->
          <template v-if="item.prop === 'status' && item.slot === 'span'">
            <span
              :style="{
                fontWeight: 1000,
                fontSize: '16px',
                color:
                  scope.row.status === 0
                    ? '#1e90ff'
                    : scope.row.status === 1
                      ? '#ff4757'
                      : '#7bed9f'
              }"
            >
              {{ getMaterialStatus(scope.row.status).text }}
            </span>
          </template>

          <!-- 图片预览 -->
          <img
            v-if="item.prop === 'license'"
            v-viewer
            :src="scope.row.license"
            alt=""
            style="width: 90px; height: 90px; object-fit: cover"
          />

          <!-- 操作按钮 -->
          <template v-if="item.display === 'button'">
            <el-button
              type="primary"
              plain
              @click="
                handleTable(
                  scope,
                  item.prop + (item.prop === 'material' && item.display === 'view' ? 'View' : '')
                )
              "
            >
              {{
                item.prop === 'resume'
                  ? '查看'
                  : item.prop === 'materialView'
                    ? '预览'
                    : item.prop === 'studentMaterial'
                      ? '下载'
                      : item.prop.includes('material')
                        ? '下载'
                        : '预览'
              }}
            </el-button>
          </template>
          <!-- 结果反馈 -->
          <template v-if="item.prop === 'feedbackDesc'">
            <el-tag v-if="scope.row.feedbackDesc == null || scope.row.feedbackDesc == ''">
              暂无反馈</el-tag
            >
            <el-button
              v-else-if="scope.row.feedbackDesc"
              type="primary"
              plain
              @click="handleTable(scope, item.prop)"
            >
              查看反馈
            </el-button>
          </template>
          <!-- 入档反馈 -->
          <template v-if="item.prop === 'isfile'">
            <el-tag v-if="scope.row.isfile == 0" type="info">
              暂未入档</el-tag
            >
            <el-tag v-if="scope.row.isfile == 1" type="success">
              已入档</el-tag
            >
          </template>

          <!-- 状态标签 -->
          <template v-if="item.display === 'tag'">
            <el-tag v-if="item.prop === 'status'" :type="getMaterialStatus(scope.row.status).type">
              {{ getMaterialStatus(scope.row.status).text }}
            </el-tag>

            <el-tag
              v-if="item.prop === 'create_time' && scope.row.create_time === ''"
              type="warning"
              >暂未提交</el-tag
            >
            <el-tag
              v-if="item.prop === 'create_time' && scope.row.create_time != ''"
              type="success"
              >{{ scope.row.create_time }}</el-tag
            >

            <el-tag
              v-if="item.prop === 'internship'"
              :type="getInternshipStatus(scope.row.internship).type"
            >
              {{ getInternshipStatus(scope.row.internship).text }}
            </el-tag>
          </template>
        </template>
      </el-table-column>
      <!-- 表格相关操作 -->
      <el-table-column
        fixed="right"
        label="操作"
        :width="props.options.length == 1 ? 130 : props.options.length == 2 ? 255 : 320"
        v-if="props.options.length"
        class="table-options"
      >
        <template #default="obj">
          <el-button
            v-for="item in props.options"
            :key="item.prop"
            plain
            :type="item.type || 'primary'"
            @click="handleTable(obj, item.prop)"
            :disabled="isButtonDisabled(item.prop, obj.row.status)"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-wrapper {
  overflow: hidden;
}
:deep() {
  .el-table {
    th,
    .table-options {
      background-color: #cccccc !important;
      width: 300px important;
    }
  }
}
</style>
